<template>
	<view class="container">
		
		<!-- 主要内容区 -->
		<view class="content" style="justify-content: flex-start; padding-top: 120rpx;">
			<!-- 验证码输入区 -->
			<view class="code-input-container">
				<text class="input-title">请输入验证码</text>
				<view class="code-inputs">
					<input
					v-for="(item, index) in codeArray"
					:key="index"
					v-model="codeArray[index]"
					type="number"
					maxlength="1"
					class="code-input"
					:focus="index === activeIndex"
					@input="handleCodeInput(index, $event)"
					@focus="activeIndex = index"
					/>
				</view>
				<text class="input-tip">验证码已播报</text>
			</view>
			<!-- 注册按钮 -->
			<button
			class="register-btn"
			:class="{active: isCodeComplete}"
			:disabled="!isCodeComplete"
			@click="handleRegister"
			>
			去绑定
			</button>
		</view>
		<!-- 注册动画 -->
		<view class="register-animation" v-if="showAnimation">
			<view class="animation-container">
				<uni-icons v-if="registerSuccess" type="checkmarkempty" size="60px" color="#07C160"></uni-icons>
				<uni-icons v-else type="spinner-cycle" size="60px" color="#1989fa" :class="{rotate: !registerSuccess}"></uni-icons>
				<text class="animation-text">{{ animationText }}</text>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { bind } from '../../app/device';

// 验证码数组
const codeArray = ref<string[]>(['', '', '', '', '', '']);
const activeIndex = ref(0);
const showAnimation = ref(false);
const registerSuccess = ref(false);
const animationText = ref('正在注册设备...');
// 验证码是否完整
const isCodeComplete = computed(() => {
	return codeArray.value.every(item => item !== '');
});
// 处理验证码输入
const handleCodeInput = (index: number, e: any) => {
	const value = e.detail.value;
	// 自动跳转到下一个输入框
	if (value && index < 5) {
		activeIndex.value = index + 1;
	}
	// 处理粘贴情况
	if (value && value.length > 1) {
		const pasteCode = value.split('');
		pasteCode.slice(0, 6).forEach((char: string, i: number) => {
			if (i < 6) codeArray.value[i] = char;
		});
		activeIndex.value = Math.min(5, pasteCode.length - 1);
	}
};
// 处理注册
const handleRegister = () => {
	if (!isCodeComplete.value) return;
	showAnimation.value = true;
	// 模拟注册过程
	setTimeout(async () => {
		const res = await confimBind(codeArray.value.join(''))
		showAnimation.value = false;
		
		if(res.code===200){
			uni.showToast({
				title: '设备注册成功1',
				icon: 'success'
			})
			uni.navigateTo({
				url:'/pages/myDevices/myDevices'
			});
		}else{
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
		}
		
	}, 500);
};

const confimBind = async (code: string | number) =>{
	if (!code) return
	try{
		return await bind(code)
	}
	catch(err){
		console.error('删除设备失败',err)
	}
}
// 处理返回
const handleBack = () => {
	if (codeArray.value.some(item => item !== '')) {
		uni.showModal({
			title: '提示',
			content: '确定要放弃当前注册吗？',
			success: (res) => {
				if (res.confirm) {
					uni.navigateBack();
				}
			}
		});
	} else {
		uni.navigateBack();
	}
};
// 页面加载时自动获取焦点
onLoad(() => {
	activeIndex.value = 0;
});
// 页面卸载时清除定时器
onUnload(() => {
});
</script>
<style>
	page {
		height: 100%;
	}
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f7f8fa;
	}
	/* 导航栏样式 */
	.nav-bar {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}
	.nav-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}
/* 内容区样式 */
	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 64rpx;
	}
/* 验证码输入区样式 */
	.code-input-container {
		width: 100%;
		margin-bottom: 80rpx;
		text-align: center;
	}
	.input-title {
		font-size: 16px;
		color: #666;
		margin-bottom: 40rpx;
		display: block;
	}
	.code-inputs {
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}
	.code-input {
		width: 80rpx;
		height: 100rpx;
		border: 1px solid #ddd;
		border-radius: 12rpx;
		text-align: center;
		font-size: 20px;
		color: #333;
		background-color: #fff;
	}
	.code-input:focus {
		border-color: #1989fa;
		box-shadow: 0 0 0 2px rgba(25, 137, 250, 0.2);
	}
	.input-tip {
		font-size: 14px;
		color: #999;
	}
	/* 注册按钮样式 */
	.register-btn {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 48rpx;
		font-size: 16px;
		color: #fff;
		background-color: #c8c9cc;
		border: none;
	}
	.register-btn.active {
		background-color: #1989fa;
	}
	/* 注册动画样式 */
	.register-animation {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}
	.animation-container {
		width: 300rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.animation-text {
		margin-top: 32rpx;
		font-size: 16px;
		color: #333;
	}
	/* 旋转动画 */
	.rotate {
		animation: rotate 1s linear infinite;
	}
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	/* 底部导航栏样式 */
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		display: flex;
		background-color: #fff;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
		z-index: 100;
	}
	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.tab-item.active .tab-text {
		color: #1989fa;
	}
	.tab-text {
		font-size: 12px;
		color: #999;
		margin-top: 8rpx;
	}
</style>
